<template>
  <div id="data-view" > 

    <dv-full-screen-container>

      <div class="background-image-top"></div>
      <div class="background-image-left"></div>
      <div class="background-image-down"></div>
      <div class="header2" >
        <div class="left W25 " >   
          <div id="" class="">
            <div id="" class="text">
              <div style="font-size:36px;"><span style="color:#FFFFFF;">金山大坝实时监测预警</span></div>
              <div style="font-size:14px;padding-top: 2%;"><span style="color:rgba(255, 255, 255, 0.298039215686275);">Taiping station real-time monitoring and early warning</span></div>
            </div>
          </div>

        </div>
        <div class="right W25" >   
          <WeatherInfo></WeatherInfo>
        </div>
      </div> 

    <!-- 大容器 -->
    <section class='container'>
        <!-- 左容器 -->
        <section class='item-left'>
          <section class="item-left-top">
            <section class="item-left-top-left">
             <ItemPage>
              <LeftTopLeft></LeftTopLeft>
             </ItemPage> 
            </section>
            <section class="item-left-top-right">
              <ItemPage>
                <LeftTopRight></LeftTopRight>
              </ItemPage>
            </section>
          </section>
          <section class="item-left-down">
            <ItemPage> <LeftDown></LeftDown></ItemPage>
          </section>
        </section>
        <!-- 右容器 -->
        <section class='item-right'>
          <ItemPage>
            <div class="right-pannel">
              <CameraList></CameraList>
              <WarningList></WarningList>
            </div>
          </ItemPage>
        </section>
    </section>


    </dv-full-screen-container>
  </div>
</template>

<script>
// 导入插槽组件
import ItemPage from "@/components/itemPage.vue";

import LeftTopLeft from "@/components/left-top-left.vue";
import LeftTopRight from "@/components/left-top-right.vue";
import LeftDown from "@/components/left-down.vue";

import CameraList from "@/components/datav/CameraList.vue";
import WarningList from "@/components/datav/WarningList.vue"; 
import WeatherInfo from "@/components/WeatherInfo.vue";
import {  mapGetters } from 'vuex';
import { ref, onMounted } from 'vue'
 export default {
  name: 'screen',
  components: {
    ItemPage,
    LeftTopLeft,
    LeftTopRight,
    LeftDown,
    CameraList,
    WarningList,
    WeatherInfo
  },
  data () {
    return {}
  },
  computed:{
        ...mapGetters(['token','loginState','userInfo'])
  },
  methods: {
				show(){
            //console.log('1111'+this.loginState);
            if(this.loginState=='false'){  
              let loginState = localStorage.getItem("user_login")
              //console.log('222'+loginState);
              if(loginState=='false'||loginState==null){
                console.log("跳转")
                this.$router.push({path:'/login'});
              }
            }
				}
      },
      created(){
        // 1.created生命周期函数中可以调用data中的方法和methods中的数据
        this.show();
      },
      setup() {
        const root = ref(null)
        // mounted
        onMounted(() => {
        }
      )
      return {
          root,
        
        }
  }
}
</script>

<style lang="less">
.text {
  border-width:0px;
  font-family:'微软雅黑', sans-serif;
  font-weight:400;
  font-style:normal;
  text-align:left;
  line-height:32px;
  padding-top: 1%;
}
.borderBottom{
  border-bottom: 1px dashed  #cccccc;
  height: 100%;
}     
.header2{
  position: relative;
  height: 7%;
  padding: 0.3rem 1.25rem;
}
#data-view {
 
  background-color: #006666;
  color: #fff;
  width: 100%;
  height: 100%;
  overflow: auto;
  #dv-full-screen-container {
    background-image: url('../../assets/images/u50.png');
    width: 100%;
    height: 100%;
    background-size: cover;
    box-shadow: 0 0 3px #006666;
    display: flex;
    flex-direction: column;
  }
  
}

.W25{
  width: 25%;
}
.left{
  float: left;
}
.right{
  float: right;
}
.mrf2{
  margin-left: 1.5%;
}
.mrr2{
  margin-right: 1.5%;
}
.FZ20{
  font-size: 20px;
}
.FZ16{
  font-size: 16px;
}
.background-image-top{
  background-image: linear-gradient(to bottom,  #006666 , transparent );
  width: 100%;
  height: 22%;
  top:0;
  background-size: cover;
  position:absolute;

}
.background-image-left{
  background-image: linear-gradient(to right, #006666 , transparent );
  width: 35%;
  height: 100%;
  background-size: cover;
  position:absolute;
  left: 0;
}
.background-image-down{
  background-image: linear-gradient(to bottom ,transparent ,#006666 );
  width: 100%;
  height: 30%;
  background-size: cover;
  position: absolute;
  bottom: 0;
}

.line-2:after {
  content: "";
  display: block;
  position: relative;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(transparent,#ccc,transparent);
}
.container {
  width: 100%;
  height: 100%;
  position:relative;
  margin: 0 auto;
  padding: 0.5% 1%;

  display: flex; //父容器设置flex布局才能在子元素使用
  // 设置左中右的占比 但是不要忘了在父容器要设置flex

}
.item-left{
  width: 75%;
//  border: 1px solid #cccccc;
 // background-color: pink;    // 测试后注释掉
}
.item-right {
  width: 26%;
//  background-color: orange;  // 测试后注释掉
//  border: 1px solid #cccccc;
}


.item-left-top{
//  background-color: red;    // 测试后注释掉
//  border: 1px solid #cccccc;
  height: 70%;
  width: 100%;
}
.item-left-down {
  height: 30%;
//  background-color: blue;  // 测试后注释掉
//  border: 1px solid #cccccc;
  width: 100%;
}
.item-left-top-left{
  width: 32%;
  float: left;
//  background-color:aqua;    // 测试后注释掉
//  border: 1px solid #cccccc;
  height: 100%;
}

.item-left-top-right{
  width:68%;
  float: right;
//  background-color:chocolate;    // 测试后注释掉
//  border: 1px solid #cccccc;
  height: 100%;
}
.right-pannel {
  display: flex;
  flex-direction: column;
  justify-content:flex-start;
  width: 365px;
  row-gap: 10px;
}
</style>